*{
  outline: none;
  /* 让输入框被选中后没有默认框框 */
  user-select: none;
  /* 用户不能选中文本，整体性更强 */
}

body{
  margin: 0;
  padding: 0;
  /* 让页面外围没有一圈内边距 */

  background: url("./background.png");
  /* 尽量使用相对位置或图床链接 */
  background-size: cover;
  background-attachment: fixed;

}

form{
  background-color: #87bede;
  width: 400px;
  height: 400px;
  border-radius: 30px;

  /* 一种水平+垂直的居中定位方式 */
  position: absolute;
  top: 45%;
  left: 70%;
  transform: translate(-50%, -50%);
  /* 这个比上次人工队计算宽高一半要好 */

  /* 注入灵魂 */
  backdrop-filter: blur(3px);
  border-left: 2px solid rgba(255, 255, 255, .3);
  border-top: 2px solid rgba(255, 255, 255, .3);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
  
  text-align: center;
}

h1{
  margin: 20px;

  font-weight: 400;
  /* 毛玻璃的话，标题比扁平 字重小一点为好 */
  font-size: 88px;
  font-family: "Berlin Sans FB";
}
.tt{
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
  opacity: 0.9;
}

input{
  border: none;
  width: 80%;
  font-size: 22px;
  padding: 10px;
  margin-bottom: 32px;
  border-radius: 16px;
  background-color: transparent;

  /* 注入灵魂 */
  backdrop-filter: blur(3px);
  border-left: 2px solid rgba(255, 255, 255, .3);
  border-top: 2px solid rgba(255, 255, 255, .3);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

  text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  font-family: "Berlin Sans FB";
  color: white;
  /* 只能控制输入的文本的颜色 */
}
/* 而placeholder要单独设置属性 */
::placeholder{
  color: white;
  opacity: 0.8;
}

.btn{
  width: 240px;
  font-size: 34px;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
}

input:focus{
  border: none;
  background-color: rgba(255, 255, 255, .1);
  /* 注入灵魂 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  border-right: 2px solid rgba(255, 255, 255, .3);
  border-bottom: 2px solid rgba(255, 255, 255, .3);
  box-shadow:inset 2px 2px 2px rgba(0, 0, 0, .2);
}